<template>
	<div class="wrapper">
		<div class="container">
			<van-list
				:offset="100"
				:class="['record-list', { empty: !list.length && !error }]"
				v-model:error="error"
				:error-text="$t('Request failed, click reload')"
				v-model:loading="loading"
				:loading-text="`${$t('Loading')}...`"
				:finished="finished"
				:finished-text="$t('No more')"
				@load="getData"
				:immediate-check="false"
			>
				<div
					v-for="(item, index) in list"
					:key="index"
					class="record-list-item"
				>
					<div class="icon"></div>
					<div class="main">
						<div class="header">
							<div class="info">
								{{$t(item.comments || '')}}
							</div>
							<div class="money">
								{{ item.currencySymbol }} +{{
									item.amount / 100
								}}
							</div>
						</div>
						<div class="content">
							<div class="time">
								{{ formatTime(item.createTime) }}
							</div>
							<div class="coin-num">-{{ item.coin }}</div>
						</div>
					</div>
				</div>
				<template #error>
					<div class="error-el" @click="errorReport">
						<div>
							<div class="bg"></div>
							<div class="text">
								{{ $t("Request failed,Please try again") }}
							</div>
							<div class="button">
								<div class="icon"></div>
								{{ $t("Retry") }}
							</div>
						</div>
					</div>
				</template>
			</van-list>
		</div>
	</div>
</template>
<script>
import TopBar from "../../components/TopBar/index.vue";
import { BalanceApi } from "@@/api/api.js";
import { reactive, toRefs, onUnmounted, onMounted, inject } from "vue";

export default {
	components: {
		TopBar,
	},
	setup() {
		const vueState = inject("vueState");
		const state = reactive({
			error: false,
			loading: false,
			finished: false,
			pageNumber: 1,
			pageSize: 20,
			list: [],
		});
		const getData = async () => {
			try {
				const res = await BalanceApi.WithdrawRecord({
					pageNumber: state.pageNumber,
					pageSize: state.pageSize,
				});
				state.list = state.list.concat(res.list);
				if (state.pageNumber < res.pageCount) {
					state.loading = false;
					state.pageNumber++;
				} else {
					state.finished = true;
				}
			} catch (e) {
				console.log(e);
				state.loading = false;
				state.error = true;
			}
		};
		const refreshData = () => {
			state.list = [];
			state.pageNumber = 1;
			getData();
		};
		const formatTime = (time) => {
			const date = new Date(time);
			return `${date.getFullYear()}-${
				date.getMonth() + 1 < 10
					? "0" + (date.getMonth() + 1)
					: date.getMonth() + 1
			}-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()} ${
				date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
			}:${
				date.getMinutes() < 10
					? "0" + date.getMinutes()
					: date.getMinutes()
			}`;
		};
		const errorReport = () => {
			window.trackEvent({
				pageTitle: "abnormalPage",
				ev: "clickRetryButton",
			});
		};
		onMounted(() => {
			vueState.EventEmitter.immediately(
				"afterRegist",
				getData,
				vueState.pageStatus.afterRegist
			);
			window.AdSDK.addEventListener("ad_show", refreshData);
		});
		onUnmounted(() => {
			window.AdSDK.removeEventListener("ad_show", refreshData);
		});

		return {
			getData,
			formatTime,
			vueState,
			...toRefs(state),
			errorReport,
		};
	},
};
</script>
<style lang="less" scoped>
.wrapper {
	height: 100%;
	.container {
		height: 100%;
		overflow-y: auto;
		.record-list {
			padding: 0 0.16rem;
			.error-el {
				padding-top: 0.8rem;
				.fc();
				.bg {
					height: 2rem;
					width: 2rem;
					background: url(https://dl.b6ad8.xyz/yowin/imgs/me/abnormal_net.svg)
						no-repeat center;
					background-size: contain;
				}
				.text {
					font-size: 0.14rem;
					line-height: 0.24rem;
					color: #9c9da6;
					text-align: center;
				}
				.button {
					margin: 0.12rem auto 0;
					.unique-button();
					box-shadow: none;
					height: 0.4rem;
					width: 1.42rem;
					font-size: 0.16rem;
					font-weight: bold;
					.icon {
						margin-right: 0.04rem;
						height: 0.2rem;
						width: 0.2rem;
						background: url(../../assets/images/icon_refresh.svg)
							no-repeat center;
						background-size: contain;
					}
				}
			}
			&.empty {
				height: 100%;
				padding-top: 1rem;
				/deep/ .van-list__finished-text {
					display: none;
				}
				.empty-el {
					display: block;
					text-align: center;
					font-size: 0.16rem;
					font-weight: 400;
					color: #c1c1c1;
					line-height: 0.28rem;
				}
				&::before {
					content: "";
					display: block;
					height: 2.28rem;
					width: 2rem;
					background: url(../../assets/images/list_empty.png)
						no-repeat center;
					background-size: contain;
					margin: 0 auto;
				}
			}
			&-item {
				display: flex;
				align-items: center;
				.icon {
					height: 0.4rem;
					width: 0.4rem;
					background: url(../../assets/images/icon_money.svg)
						no-repeat center;
					background-size: contain;
				}
				.main {
					flex: 1;
					margin-left: 0.08rem;
					padding: 0.16rem 0 0.12rem;
					border-bottom: 0.01rem solid #ededef;
					font-weight: 400;
					.header,
					.content {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.info {
						font-size: 0.16rem;
						line-height: 0.28rem;
						color: #121314;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.time {
						margin-top: 0.02rem;
						font-size: 0.12rem;
						line-height: 0.2rem;
						color: #9c9da6;
					}
					.coin-num {
						background: url(../../assets/images/icon_coin.svg)
							no-repeat left center;
						background-size: 0.24rem 0.24rem;
						padding-left: 0.3rem;
						font-size: 0.14rem;
						font-weight: 700;
						line-height: 0.28rem;
						color: #9c9da6;
					}
					.money {
						font-size: 0.18rem;
						font-weight: 700;
						line-height: 0.28rem;
					}
				}
			}
		}
	}
}
</style>
